<template>
  <view class="w-full min-h-screen bg-[#f6f6f6]">
    <!-- 用户信息区域 -->
    <view class="flex items-center bbs p-[60rpx] pb-[270rpx]">
      <image :src="header" mode="aspectFill" class="w-[120rpx] h-[120rpx] rounded-full border-2 border-orange-500 bg-[#eee]" />

      <view class="flex flex-col ml-[30rpx] gap-2">
        <text class="text-[32rpx] text-[#fff] font-medium">{{ userStore.info.nickname }}</text>
        <nut-button class="mx-auto flex items-center" size="small" type="default" @tap="login"> 
          {{ userStore.info.nickname || '登录' }}
         </nut-button>
      </view>
    </view>

    <view class="mt-[-80rpx] pb-8">
      <!-- 订单中心 -->
      <view class="mx-[30rpx] mt-[30rpx] bg-[#fff] rounded-[16rpx] p-[30rpx]">
        <!-- <text class="block text-[32rpx] font-bold mb-[30rpx]">订单中心</text> -->

        <!-- 全部订单 -->
        <!-- <view class="flex justify-between items-center mb-[30rpx]">
          <text class="text-[28rpx]">全部订单</text>
          <view class="flex items-center">
            <text class="text-[24rpx] text-gray-500 mr-[10rpx]" @tap="jump(0)">查看全部</text>
          </view>
        </view> -->

        <!-- 订单状态 -->
        <view class="grid grid-cols-4 gap-y-[40rpx]">
          <view class="flex flex-col items-center" v-for="item in orderStatus" :key="item.text" @tap="jump(item.id)">
            <!-- <image src="http://www.dzgktf.com/templets/default/images/wtyt.jpg" class="w-[60rpx] h-[60rpx] mb-[10rpx]" /> -->
            <IconFont font-class-name="iconfont" class-prefix="icon" :name="item.name" size="40" class="mb-[10rpx]" color="#ff9800" />
            <text class="text-[24rpx]">{{ item.text }}</text>
          </view>
        </view>
      </view>

      <!-- 功能列表 -->
      <view class="mx-[30rpx] mt-[30rpx] bg-[#fff] rounded-[16rpx] px-[30rpx]">
        <button
          class="flex items-center py-[30rpx] border-0 border-b border-solid border-[#eee] btnss"
          v-for="(item, index) in menuList"
          :open-type="item.openType"
          :key="item.text"
          :class="{ 'border-b-0': index == menuList.length - 1 }"
          @tap="fun(item)"
        >
          <IconFont font-class-name="iconfont" class-prefix="icon" :color="item.color" :name="item.name" size="28" class="mr-[20rpx]" />
          <text class="flex-1 text-[28rpx]">{{ item.text }}</text>
          <IconFont name="right" color="#ccc"></IconFont>
        </button>

        <!-- <button open-type="share" class="flex items-center py-[30rpx] border-0 border-b border-solid border-[#eee] border-b-0">
          <IconFont font-class-name="iconfont" class-prefix="icon" color="#e91e63" name="JC_054" size="28" class="mr-[20rpx]" />
          <text class="text-[28rpx] mr-auto">分享好友</text>
          <IconFont name="right" color="#ccc"></IconFont>
        </button> -->

        <!-- <button open-type="getPhoneNumber" class="flex items-center py-[30rpx] border-0 border-b border-solid border-[#eee] border-b-0" @getphonenumber="getPhoneNumber">获取手机号</button> -->
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import Taro, { useShareAppMessage, useShareTimeline } from "@tarojs/taro";
import { computed, ref, onMounted } from "vue";

import { IconFont } from "@nutui/icons-vue-taro";
import { useUserStore } from "@/stores/index";
import { initShare } from "@/utils/config";
import men from "@/assets/imgs/mrxd.png";

// 获取用户信息
const userStore = useUserStore();

userStore.doGetInfo();

Taro.showShareMenu({
  withShareTicket: true,
  menus: ['shareAppMessage', 'shareTimeline']
});

useShareAppMessage(() => initShare());

// 分享到朋友圈
useShareTimeline(() => initShare());



// 页面加载时显示分享菜单
onMounted(() => {


  setTimeout(() => {
    console.log("showShareMenu", userStore);
  }, 2000);
});

const header = computed(() => {
  return userStore.info.avatar || men;
});

// 分享给好友
useShareAppMessage(() => {
  return {
    title: '我的功德记录',
    path: '/pages/index/index',
    imageUrl: 'https://via.placeholder.com/300x200/2a9d8f/fff?text=我的功德'
  }
});

// 分享到朋友圈
useShareTimeline(() => {
  return {
    title: '我的功德记录',
    imageUrl: 'https://via.placeholder.com/300x200/2a9d8f/fff?text=我的功德'
  }
});
// 订单状态数据
const orderStatus = ref([
  { text: "未布施", id: 1, name: "dingdan4" },
  { text: "待发货", id: 2, name: "dilanxianxingiconyihuifu_huabanfuben" },
  { text: "待收货", id: 3, name: "order-fill" },
  { text: "全部订单", id: 0, name: "dingdan6" },
]);

// 菜单列表数据
const menuList = ref([
  { text: "我的资料", name: "xingxing", color: "#561e63", openType: "" },
  { text: "清空缓存", name: "shanchu", color: "#e91e63", openType: "" },
  // { text: "意见反馈", name: "xingxing", color: "#2196F3" },
  { text: "常见问题", name: "dingdan10", color: "#231ee3", openType: "" },
  { text: "隐私协议", name: "wode-wodedingdan", color: "#ff9822", openType: "" },
  // { text: "收货地址", name: "yunshu", color: "#fe3bff" },
  { text: "联系客服", name: "kefu1", color: "#00bcd4", openType: "contact" },
]);

const jump = (id) => {
  // 跳转逻辑，这里可以根据实际需求实现跳转到不同页面
  // console.log(`跳转到 ${item.text} 页面`)
  Taro.navigateTo({
    url: `/other/order/detail?id=${id}`,
  });
};

const login = () => {
  // 登录逻辑，这里可以根据实际需求实现登录功能
  userStore.doLogin();
};

const fun = (item) => {
  // 功能点击逻辑
  console.log(`点击了 ${item.text}`);
  if (item.text == "清空缓存") {
    Taro.clearStorageSync();
    Taro.showToast({
      title: "清空缓存成功",
      icon: "success",
    });
    setTimeout(() => {
      Taro.reLaunch({
        url: "/pages/index/index",
      });
    }, 1800);

    return;
  }
  if (item.text === "隐私协议") {
    Taro.navigateTo({
      url: "/other/mine/privacy",
    });
    return;
  }
  if (item.text === "我的资料") {
    Taro.navigateTo({
      url: "/other/mine/info",
    });
    return;
  }
  // if (item.text === "收货地址") {
  //   Taro.navigateTo({
  //     url: "/other/address/index",
  //   });
  //   return;
  // }
  // Taro.navigateTo({
  //   url: `/pages/mine/${item.name}`,
  // });
};

function getPhoneNumber(e) {
  console.log("e", e);
  if (e.detail.errMsg === "getPhoneNumber:ok") {
    const { encryptedData, iv } = e.detail;
    // 这里需要将 encryptedData 和 iv 发送到服务器端进行解密
    console.log("加密数据：", encryptedData);
    console.log("加密算法的初始向量：", iv);
  } else {
    console.log("用户拒绝授权获取手机号");
  }
}
</script>

<style lang="scss">
/* 重置按钮样式 */
button {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  line-height: 1;
}

button::after {
  border: none;
}

.btnss {
  text {
    text-align: left;
  }
}

/* 全局样式调整 */
page {
  background-color: #fff;
}
.bbs {
  background-image: url("@/assets/imgs/shan.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
</style>
